<template>
	<view>
		<view class="title">请上传本人身份证照片</view>
		<view class="card flex-center">
			<image :src="form.head_img ? form.head_img : '/static/人像.png' " mode="aspectFill"
				@click="upload('head_img')"></image>
			<image :src="form.badge_img ? form.badge_img : '/static/国徽面.png'" mode="" @click="upload('badge_img')">
			</image>
		</view>
		<view class="subTitle">请核对您的个人信息</view>
		<view class="form">
			<view class="form-item flex-align">
				<view class="form-item-label">真实姓名</view>
				<view class="form-item-input">
					<input type="text" placeholder="请输入您的姓名" placeholder-class="ac" v-model="form.name" />
				</view>
			</view>
			<view class="form-item flex-align">
				<view class="form-item-label ">身份证号码</view>
				<view class="form-item-input">
					<input type="text" placeholder="请输入您的身份证号" placeholder-class="ac" v-model="form.number" />
				</view>
			</view>
		</view>
		<view class="tx">此信息仅用于验证您的身份信息，平台会严 格加密保管您的个人 信息。</view>
		<view class="btn flex-center" @click="submit">
			确认
		</view>
	</view>
</template>

<script>
	import {
		uploadImg
	} from '@/common/upload.js'
	import {
		userRealHttp
	} from '@/common/http/api.js'
	export default {
		data() {
			return {
				form: {
					head_img: '',
					badge_img: '',
					name: '',
					number: ''
				}
			};
		},
		methods: {
			upload(name) {
				uploadImg().then(res => {
					console.log('res', res)
					this.form[name] = res.data.url
				})
			},
			async submit() {
				await this.$mValidate(
					[{
						require: true,
						key: 'head_img',
						message: '请上传人像图片'
					}, {
						require: true,
						key: 'badge_img',
						message: '请上传国徽图片'
					}, {
						require: true,
						key: 'name',
						message: '请输入真实姓名'
					}, {
						require: true,
						key: 'number',
						message: '请输入身份证号码'
					}, ], this.form)
				console.log('this.form', this.form)
				uni.showLoading()
				let data = this.form
				userRealHttp(data).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: "提交成功！",
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F1E7;
	}

	.title {
		width: 750rpx;
		height: 74rpx;
		background: #EFE9DD;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 24rpx;
		color: #84643B;
		box-sizing: border-box;
		padding: 25rpx 31rpx;
		margin-bottom: 50rpx;
	}

	.card {
		margin-bottom: 39rpx;

		image {
			width: 332.1rpx;
			height: 209rpx;
		}
	}

	.subTitle {
		width: 750rpx;
		height: 74rpx;
		background: #EFE9DD;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		box-sizing: border-box;
		padding: 25rpx 31rpx;
		margin-bottom: 50rpx;
	}

	.form {
		width: 100%;
		box-sizing: border-box;
		padding: 0 54rpx;
		border-bottom: 20rpx solid #EFE9DD;
		margin-bottom: 39rpx;

		.form-item {
			padding: 24rpx 0;

			.form-item-label {
				width: 178rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
			}

			.form-item-input {
				min-width: 0;
				flex: 1;

				input {
					width: 100%;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 30rpx;
					color: #000;
				}

				.ac {
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 30rpx;
					color: #999999;
				}
			}
		}
	}

	.tx {
		width: 677rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		margin: 0 auto;
		margin-bottom: 165rpx;
	}

	.btn {
		width: 690rpx;
		height: 88rpx;
		background: #84643B;
		border-radius: 44rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		margin: 0 auto;
	}
</style>